import React, { Component } from 'react';
import {
  View,
  Image,
  StyleSheet,
  ScrollView,
  TouchableWithoutFeedback,
  Dimensions,
} from 'react-native';

import {
  Navbar,
  HText,
  Divider,
  Modal,
  Gallery,
} from '../../DodLibrary/index';

const SCREEN_SIZE = Dimensions.get('window');

const imgData = [
  'http://qiniu.enjoymemory.cn/quanyecha/quanyecha.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%281%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%2810%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%2811%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%2812%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%282%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%283%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%285%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%286%29.jpeg',
  'http://qiniu.enjoymemory.cn/quanyecha/timg%20%288%29.jpeg',
];

const perLine = 4;
const imgWidth = (SCREEN_SIZE.width - 20) / perLine;

// Button
class CarouselPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedIndex: 0,
    };
  }

  _handleImagePress = (index) => {
    this.setState({ clickedIndex: index }, () => this._RippleModal.open());
  };

  render() {
    const {
      navigation,
    } = this.props;
    const {
      clickedIndex,
    } = this.state;
    return (
      <View
        style={styles.container}>
        <Modal.RippleModal
          ref={ref => { this._RippleModal = ref; }}>
          <Gallery
            currentPage={clickedIndex}
            displayData={imgData}
            onClose={() => this._RippleModal.close()}
            photoViewProps={{
              maximumZoomScale: 5,
            }}
          />
        </Modal.RippleModal>

        <Navbar
          title="Gallery"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <Divider />
        <Divider />
        <Divider />
        <View
          style={{
            flexDirection: 'row',
            marginHorizontal: 10,
            flexWrap: 'wrap',
          }}>
          {imgData.map((v, i) => (
            <TouchableWithoutFeedback
              key={i}
              onPress={() => this._handleImagePress(i)}>
              <Image
                source={{
                  uri: v,
                }}
                style={{
                  width: imgWidth,
                  height: imgWidth,
                }}
              />
            </TouchableWithoutFeedback>
          ))}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default CarouselPage;
